<template>
  <el-container>

    <el-header>
       <h2 class="title">FRPC简易配置面板</h2>
    </el-header>
    <el-main>
      <el-row >
      <el-col :span="24">
       
      </el-col>
      
    </el-row>
      
    
    
      <el-row>
        <el-col :span="24">
          <el-form ref="from" label-width="100px" size="mini" :modle="config">
            <el-form-item label="服务器地址">
              <el-row>
                <el-col :span="16">
                  <el-input v-model="config.serverAddr"></el-input>
                </el-col>
                <el-col :span="2">
                  <div class="text-center">:</div>
                </el-col>
                <el-col :span="6">
                  <el-input v-model="config.serverPort"></el-input>
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="本地转发地址">
              <el-row>
                <el-col :span="16">
                  <el-input v-model="config.localAddr"></el-input>
                </el-col>
                <el-col :span="2">
                  <div class="text-center">:</div>
                </el-col>
                <el-col :span="6">
                  <el-input v-model="config.localPort"></el-input>
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="TOKEN">
              <el-input v-model="config.token" type="password"></el-input>

            </el-form-item>
              
            <el-form-item label="远程代理端口">
              <el-input v-model="config.proxyPort"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="connect">连接</el-button>
              <el-button @click="disconnect">断开</el-button>
            </el-form-item>
           
          </el-form>
        </el-col>
        
      </el-row>

      <el-row>
        <el-input id="log-textarea" type="textarea" readonly="" resize="none" rows="10" v-model="config.log"></el-input>
      </el-row>

    </el-main>
    
    
  </el-container>
   
</template>
<script>
const { ipcRenderer, remote } = require('electron')

ipcRenderer.on('connectEventResponse', (event, arg) => {
  console.log(arg)
})

export default {
  name: 'main',
  data () {
    return {
      config: {
        serverAddr: '',
        serverPort: 7000,
        localAddr: '127.0.0.1',
        localPort: 8080,
        token: '',
        proxyPort: 88,
        log: ''
      }
    }
  },
  watch: {
    'config.log': function (val, oldVal) {
      const textarea = document.getElementById('log-textarea')
      textarea.scrollTop = textarea.scrollHeight
    }

  },
  mounted () {
    const loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    setTimeout(() => {
      loading.close()
    }, 500)

    var iniConfig = remote.app.config
    this.config.serverAddr = iniConfig.common.server_addr
    this.config.serverPort = iniConfig.common.server_port
    this.config.localAddr = iniConfig.ssh.local_ip
    this.config.localPort = iniConfig.ssh.local_port
    this.config.proxyPort = iniConfig.ssh.remote_port
    this.config.token = iniConfig.common.token

    ipcRenderer.on('log', (event, arg) => {
      if (this.config.log.length > 0) {
        this.config.log += '\n'
      }
      this.config.log += arg
    })
  },
  methods: {
    connect () {
      // console.log('connect')

      // 检查输入数据
      if (this.config.serverAddr == null || this.config.serverAddr.length <= 0) {
        alert('服务器地址不能为空！')
        return
      }

      if (this.config.serverPort == null || this.config.serverPort.length <= 0) {
        alert('服务器监听端口不能为空！')
        return
      }

      if (this.config.localAddr == null || this.config.localAddr.length <= 0) {
        alert('本地转发地址不能为空！')
        return
      }

      if (this.config.localPort == null || this.config.localPort.length <= 0) {
        alert('本地转发地址端口不能为空！')
        return
      }

      if (this.config.proxyPort == null || this.config.proxyPort.length <= 0) {
        alert('服务器代理端口不能为空！')
        return
      }
      ipcRenderer.send('connectEvent', this.config)
    },
    disconnect () {
      ipcRenderer.send('disconnectEvent')
    }
  }

}
</script>

<style>
.title{
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
  
}
.text-center{
  text-align: center;
}


</style>